<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>echarts-java</title>
<script src="js/echarts.js"  th:src="@{/js/echarts.js}"></script>
<script src="js/jquery-1.8.3.min.js" th:src="@{/js/jquery-1.8.3.min.js}"></script>

</head>
<body>
	<div id="main" style="width: 600px;height:400px;"></div>
	<script type="text/javascript">
			var date = [];
			var data = [];
			// 返回HH:mm:ss的时间格式
			function getNowDate() {
				 var date = new Date();
				 var sign1 = "-";
				 var sign2 = ":";
				 var day  = date.getDate(); // 日
				 var hour = date.getHours(); // 时
				 var minutes = date.getMinutes(); // 分
				 var seconds = date.getSeconds() //秒
				 // 给一位数数据前面加 “0”
				 if (hour >= 0 && hour <= 9) {
				  hour = "0" + hour;
				 }
				 if (minutes >= 0 && minutes <= 9) {
				  minutes = "0" + minutes;
				 }
				 if (seconds >= 0 && seconds <= 9) {
				  seconds = "0" + seconds;
				 }
				 var currentdate = hour + sign2 + minutes + sign2 + seconds;
				 return currentdate;
				}
			
			function addData(shift) {
			    now = getNowDate();
			    // 设置横轴数据
			    date.push(now);
			    // ajax 开启同步
			    $.ajax({async: false,url: "/echarys/t5",dataType:"json",type:"POST",
			    	success:function(reData){
			    		data.push(reData.data);
			    	}});
			    if (shift) {
				// 删除数据第一个元素值，并返回
				// 实现数据的平移
			        date.shift();
			        data.shift();
			    }
			}
			$(function(){
				var myChart = echarts.init(document.getElementById("main"));
				// 加载初始数据
				for (var i = 1; i < 100; i++) {
				    addData();
				}
				// 设置初始的option
				myChart.setOption( {
						legend: {
	                        data:['金额']
	                    },	
					    xAxis: {
					        type: 'category',
					        boundaryGap: false,
					        data: date
					    },
					    yAxis: {
					        boundaryGap: [0, '50%'],
					        type: 'value'
					    },
					    series: [
					        {
					            name:'金额',
					            type:'line',
					            //是否平滑曲线显示
					            smooth:true,
					            symbol: 'none',
					            stack: 'a',
					            data: data
					        }
					    ]
					});
				// 使用定时器加载数据
				setInterval(function () {
					// 开启删除数据第一个，实现数据的平移
				    addData(true);
				    myChart.setOption({
				        xAxis: {
				            data: date
				        },
				        series: [{
				            name:'金额',
				            data: data
				        }]
				    });
				    addData();
				}, 1000);
			})
	</script>
</body>
</html>